<!-- 这个组件是具体城市的信息，根据传递的url地址解析后并调用接口 -->
<template>
    <div class="add" @click="handleClick" v-show="isAddVisible">
        <el-icon size="20" color="#ffffff">
            <Plus />
        </el-icon>
    </div>

    <div class="title">
        你正在预览{{ city }}的天气信息
        <span class="title1" v-show="titleVisible">，可以通过右上角的"+"号按钮保存起来</span>
    </div>
    <div class="now">
        <h1>当日气温是：{{ weather.temperature }}摄氏度</h1>
        <h1>当日天气是：{{ weather.weather }}</h1>
        <h1>当日风向是：{{ weather.winddirection }}风</h1>
        <h1>当日风力是：{{ weather.windpower }}级</h1>
    </div>
    <div class="chart">
        <forecast :adcode="adcode" />
    </div>
</template>
<script setup>
import { Plus } from '@element-plus/icons-vue'
import forecast from '../components/forecast.vue'
import { getIpWeather } from '../api/weather.js'
import { ref, onMounted } from 'vue'

// 解析url参数
import { useRoute } from 'vue-router'
const route = useRoute()
const query = route.query
const { adcode, city } = query   //解构出来adcode 和当前city   



const weather = ref({})//保存当前查询地区天气的一个对象

onMounted(async () => {
    const data = await getIpWeather(adcode)
    weather.value = data.lives[0]
    // console.log(weather.value)
})
// 从pinia中读写数据
import { useCityStore } from '../stores/cityList.js'
import { storeToRefs } from 'pinia'
const cityObj = useCityStore()
const { isAddVisible, titleVisible } = storeToRefs(useCityStore())

// 点击加号时候添加数据
const handleClick = () => {
    isAddVisible.value = false   //隐藏 按钮
    cityObj.addCity(weather.value)
    // console.log(cityObj.cityList)
}
</script>
<style lang="scss" scoped>
.add {
    position: fixed;
    top: 30px;
    right: 185px;
    z-index: 9999;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    padding: 8px;
    color: #ffffff;
    background-color: #004e71;
}

.now {
    height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    color: #ffffff;
    background-color: #00668a;
}
</style>
